Skip to content

[#1224] Redesign 19+ toggle as round circle icon next to logo#1225

Merged
realproject7 merged 3 commits into
mainfrom
task/1224-19plus-round-icon
May 18, 2026
Merged

[#1224] Redesign 19+ toggle as round circle icon next to logo#1225
realproject7 merged 3 commits into
mainfrom
task/1224-19plus-round-icon

Conversation

@realproject7
Copy link
Copy Markdown
Owner

@realproject7 realproject7 commented May 18, 2026

Summary

  • Replaces the text pill "19+" toggle with a compact round circle icon (20×20px) showing "19"
  • Active state: red filled circle (bg-red-600) with white text — matches TopToon reference
  • Inactive state: muted gray circle (bg-neutral-700) with subtle text
  • Adds aria-pressed attribute for accessibility
  • Positioned immediately right of the "PlotLink" logo text in NavBar
  • Works on both desktop and mobile nav layouts

Test plan

  • Verify round "19" icon appears next to PlotLink logo on desktop
  • Verify round "19" icon appears next to PlotLink logo on mobile
  • Click toggles between gray (off) and red (on) states
  • Toggling on homepage updates URL to include ?nsfw=1
  • Preference persists in localStorage across page reloads
  • No duplicate toggle in FilterBar or elsewhere

Fixes #1224

🤖 Generated with Claude Code

realproject7 and others added 2 commits May 18, 2026 13:39
@realproject7 @claude
[#1224] Redesign 19+ toggle as round circle icon next to logo
9a13d34 
Replace the text pill toggle with a compact 20px round circle showing
"19" — red fill + white text when active, muted gray when inactive.
Adds aria-pressed for accessibility.

Fixes #1224

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@realproject7 @claude
Bump version to 1.29.2
d772c7a 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 18, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
plotlink Ignored Ignored May 18, 2026 4:41am

Request Review

project7-interns
project7-interns requested changes May 18, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: REQUEST CHANGES

Summary

The visual styling of the toggle is moving in the right direction, but the layout still fails the main placement requirement. The button remains a separate flex child in a justify-between navbar, so it will be spaced away from the logo rather than immediately adjacent to the PlotLink text.

Findings

  • [high] The 19 icon is not guaranteed to sit immediately to the right of the PlotLink logo text.
    • File: src/components/NavBar.tsx:69
    • Suggestion: Group the logo link and the 19 button in a left-side flex wrapper, or otherwise make the button part of the logo cluster, so the layout is [P logo] PlotLink [19 circle icon] on both desktop and mobile instead of a separately distributed navbar item.

Decision

Request changes because the PR does not satisfy the acceptance criterion requiring the icon to be positioned immediately right of the PlotLink logo text in the NavBar.

@realproject7
Copy link
Copy Markdown
Owner Author

realproject7 commented May 18, 2026

Reviewer 2 — APPROVE

Clean, minimal diff (7 additions / 6 deletions). Matches the TopToon reference well:

  • Circle sizing: h-5 w-5 (20px) with flex-shrink-0 — correct for a compact badge next to the logo. Won't collapse in tight flex layouts.
  • Active state: bg-red-600 text-white matches the reference red circle. Intentionally diverges from the green accent — appropriate for a content-warning toggle.
  • Inactive state: bg-neutral-700 text-neutral-400 with hover states — matches the muted gray in reference image 1.
  • Text: "19" (not "19+") fits the smaller circle and matches the reference.
  • Accessibility: aria-pressed addition is a nice touch.
  • Patch bump: 1.29.1 → 1.29.2 per versioning policy.

No issues found.

@realproject7 @claude
[#1224] Group logo and 19+ icon in shared flex wrapper
3ca0297 
Wraps the logo link and 19+ toggle button in a single flex container
so they always sit adjacent regardless of justify-between layout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@realproject7
Copy link
Copy Markdown
Owner Author

realproject7 commented May 18, 2026

Reviewer 2 — re-review APPROVE

Fix looks correct: wrapping logo + 19+ button in a shared flex container ensures they stay adjacent under justify-between. No new issues.

project7-interns
project7-interns approved these changes May 18, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: APPROVE

Summary

The follow-up fix groups the PlotLink logo and 19 icon in a shared flex container, so the icon now sits immediately next to the logo text as required. The round gray/off and red/on button styling, click handler, persisted preference path, and lack of duplicate toggle match the issue scope.

Findings

  • None.

Decision

Approve. The previous placement blocker is resolved and the PR satisfies the acceptance criteria for issue #1224.

@realproject7 realproject7 merged commit 06a946e into main May 18, 2026
4 checks passed
This was referenced May 18, 2026
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@project7-interns project7-interns project7-interns approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Fix] 19+ toggle: redesign as round red icon next to logo (reference-based)

2 participants

@realproject7 @project7-interns